$(start);

function start(){
    console.log("start")
    // var socket = new WebSocket("ws://192.168.15.225:4444/");
    // var socket = new WebSocket("ws://10.215.102.140:4444/");
    var socket = new WebSocket("ws://192.168.11.55:4444/");

    var glChart = echarts.init(document.getElementById('dis'));

    var disData = [];

    var preData = [null, null, null];

    var glOption = {
        title: {
            text: '加速度（m/s2）',
            x: 'center'
        },
        tooltip: {},
        legend: {
            // borderWidth:1,
            // padding:10,
            // itemGap:20,
            data:['x方向加速度','y方向加速度','z方向加速度'],
            x:'left',
            // y:'top',
            // textStyle:{
            //     color:'rgba(0,0,0,255)'
            // }
        },
        dataZoom:[
            {
                show:true,
                realtime:true,
                // startValue:todo,
                // endValue:todo,
            }
        ],
        xAxis: {
            type:'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // boundaryGap: false,
            type : 'category',
            axisLabel: {
                textStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // fontSize: 35,
                }
            },
            nameTextStyle: {
                // color: 'rgba(0,255,0,30)', 
                // fontSize: 35,
            },
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // show:false,
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        series: [
            {
                name: '位移',
                type: 'line',
                itemStyle: {
                    color: 'rgba(0,255,255,255)'
                },
                data: disData
            },
            // {
            //     name: 'y方向加速度',
            //     type: 'line',
            //     itemStyle: {
            //         color: 'rgba(255,0,255,255)'
            //     },
            //     data: yLaccData
            // },
            // {
            //     name: 'z方向加速度',
            //     type: 'line',
            //     itemStyle: {
            //         color: 'rgba(255,255,0,255)'
            //     },
            //     data: zLaccData
            // }
        ]
    };

    glChart.setOption(glOption);

    socket.onmessage = function(event){
        var AllData = JSON.parse(event.data);
        console.log(AllData);

        if(preData[0] == null){
            preData[0] = AllData.x;
            preData[1] = AllData.y;
            preData[2] = AllData.z;
        }

        if(Math.abs(AllData.x - preData[0]) > 0.01 || Math.abs(AllData.y - preData[1]) > 0.01 || Math.abs(AllData.z - preData[2]) > 0.01){
            // disData.push([AllData.x, AllData.y, AllData.z]);
            disData.push([AllData.x, AllData.y, 0]);
            preData[0] = AllData.x;
            preData[1] = AllData.y;
            preData[2] = AllData.z;
            glChart.setOption(glOption);
        }
    };

    socket.onclose = function(event){
        console.log("model socket close");
	};

	socket.onerror = function(event) { 

    };

    socket.onopen = function(event){
		console.log("socket open");
	};
}